<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

    <div class="flex mt10">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header">
          <span style="color: #00ff00; font-size: 14px">工厂货号绿色代表:该工厂货号 + 配色已检核</span>
        </div>
        <Table :tableHeader="tableHeader" :tableData="tableData" :isLoading="isLoading" @currentRow="currentRow" />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600" class="mr24">订单明细</span>
          <span style="color: red; font-size: 14px">指令号为红色代表: 有指令已经配套OK不能再更改裁剪工艺</span>
        </div>
        <Table
          :tableHeader="tableHeader2"
          :tableData="tableData2"
          @checkboxChange="checkboxChange"
          :getTableList="currentRow"
          @confirmChange="confirmChange"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { selectList } from '@/plugins/mixin'
import LoginWork from '@/utils/LoginWork'
import service from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash'
import { defineComponent, onMounted, ref, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'BottomWarehouseInventory'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入工厂货号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '样品类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '未检核',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '已检核',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '检核'
  },
  {
    type: 'button',
    checkboxLabel: '取消检核'
  },
  {
    type: 'checkbox',
    checkboxLabel: '新旧款未定义',
    checked: true
  }
])
const imgList = ref([])
const tableHeader = ref([
  {
    label: '指令号',
    prop: 'lotNo',
    width: 180
  },
  {
    label: '检核状态',
    prop: 'check'
  },
  {
    backgroundColor: true,
    label: '工厂货号',
    prop: 'style',
    width: 120
  },
  {
    backgroundColor: true,
    label: '颜色',
    prop: 'color',
    width: '115px'
  },
  {
    label: '楦头',
    prop: 'lastNo',
    width: '115px'
  },
  {
    label: '大底',
    prop: 'moldNo'
  },
  {
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    srcList: imgList
  }
])

const tableHeader2 = ref([
  {
    backgroundColor: true,
    label: '指令号',
    prop: 'lotNo',
    width: 180
  },
  {
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    type: 'checkbox',
    label: '新版',
    prop: 'newFlag',
    width: 60
  },
  {
    type: 'checkbox',
    label: '旧版',
    prop: 'oldFlag',
    width: 60
  },
  {
    type: 'checkbox',
    label: '改版',
    prop: 'gbFlag',
    width: 60
  },
  {
    Multistage: true,
    label: '裁剪工艺(本厂)',
    children: [
      {
        label: '电雕',
        width: '50',
        type: 'checkbox',
        prop: 'embroidFlag'
      },
      {
        label: '印刷/胶印',
        width: '52',
        type: 'checkbox',
        prop: 'printFlag'
      },
      {
        label: '无缝',
        width: '50',
        type: 'checkbox',
        prop: 'sewFlag'
      },
      {
        label: '高频/热切',
        width: '52',
        type: 'checkbox',
        prop: 'hfFlag'
      }
    ]
  },
  {
    Multistage: true,
    label: '裁剪工艺(外发)',
    children: [
      {
        label: '外发胶印',
        width: '52',
        type: 'checkbox',
        prop: 'outJy'
      },
      {
        label: '分化',
        width: '50',
        type: 'checkbox',
        prop: 'outFh'
      },
      {
        label: '电绣',
        width: '50',
        type: 'checkbox',
        prop: 'outDx'
      },
      {
        label: '外发热切',
        width: '52',
        type: 'checkbox',
        prop: 'outRq'
      }
    ]
  }
])

const tableData2 = ref([])

// 表一模块
// 置空按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
    getTableList()
  }
  if (content === '检核') {
    const { color, style } = currentTable.value
    const res = (await LoginWork.post('/pcOrder/shoe/pcOrderStyleColorDdCheck', {
      check: 1,
      color,
      style
    })) as any
    if (res.code === 200) {
      JMessage.success('检核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '取消检核') {
    const { color, style } = currentTable.value
    const res = (await LoginWork.post('/pcOrder/shoe/pcOrderStyleColorDdCheck', {
      check: 2,
      color,
      style
    })) as any
    if (res.code === 200) {
      JMessage.success('取消检核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}
const tableData = ref([])
const isLoading = ref(true)

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 表格计算函数
const cfmFlag = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '未检核')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '已检核')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return 2
  } else if (Audited.checked) {
    return 1
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/pcOrder/shoe/pcOrderStyleColorDd', {
    check: cfmFlag(),
    facStyle: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工厂货号'
    )?.inputValue,
    lotNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令号'
    )?.inputValue,
    orderEndTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '下单日期'
    )?.dateValue?.[1],
    orderStartTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '下单日期'
    )?.dateValue?.[0],
    sampleType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '样品类型')
      ?.selectValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  imgList.value = tableDataList.list.map((item: any) => {
    return item.photoPath
  })
  tableData.value = tableDataList.list.map((item: any) => {
    item.backgroundColor === 'Y' ? (item.backgroundColor = '#00ff00') : (item.backgroundColor = '#ffffff')
    return item
  })
  total.value = tableDataList.total
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
const currentTable = ref()
// 点击表给另一张表传数据
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  let { lotNo }: any = row
  currentTable.value = row
  // 给表二传指令号
  let table2Data = await service.get<any, any>(`/pcOrder/shoe/pcOrderStyleColorDdDetail`, {
    params: {
      lotNo
    }
  })
  tableData2.value = table2Data.list.map((item: any) => {
    item.newFlag === 'Y' ? (item.newFlag = true) : (item.newFlag = false)
    item.oldFlag === 'Y' ? (item.oldFlag = true) : (item.oldFlag = false)
    item.gbFlag === 'Y' ? (item.gbFlag = true) : (item.gbFlag = false)
    item.embroidFlag === 'Y' ? (item.embroidFlag = true) : (item.embroidFlag = false)
    item.printFlag === 'Y' ? (item.printFlag = true) : (item.printFlag = false)
    item.sewFlag === 'Y' ? (item.sewFlag = true) : (item.sewFlag = false)
    item.hfFlag === 'Y' ? (item.hfFlag = true) : (item.hfFlag = false)
    item.outJy === 'Y' ? (item.outJy = true) : (item.outJy = false)
    item.outFh === 'Y' ? (item.outFh = true) : (item.outFh = false)
    item.outDx === 'Y' ? (item.outDx = true) : (item.outDx = false)
    item.outRq === 'Y' ? (item.outRq = true) : (item.outRq = false)
    item.change = 'Y'
    if (item.backgroundColor === 'Y') {
      item.backgroundColor = '#ff0000'
      tableHeader2.value.forEach((ele: any) => {
        if (ele.Multistage === true) {
          ele.children.forEach((childrenList: any) => (childrenList.disable = true))
        }
      })
    } else {
      tableHeader2.value.forEach((ele: any) => {
        if (ele.Multistage === true) {
          ele.children.forEach((childrenList: any) => (childrenList.disable = false))
        }
      })
    }
    return item
  })
}
const confirmChange = async (row: any) => {
  row.newFlag === true ? (row.newFlag = 'Y') : (row.newFlag = '')
  row.oldFlag === true ? (row.oldFlag = 'Y') : (row.oldFlag = '')
  row.gbFlag === true ? (row.gbFlag = 'Y') : (row.gbFlag = '')
  row.embroidFlag === true ? (row.embroidFlag = 'Y') : (row.embroidFlag = '')
  row.printFlag === true ? (row.printFlag = 'Y') : (row.printFlag = '')
  row.sewFlag === true ? (row.sewFlag = 'Y') : (row.sewFlag = '')
  row.hfFlag === true ? (row.hfFlag = 'Y') : (row.hfFlag = '')
  row.outJy === true ? (row.outJy = 'Y') : (row.outJy = '')
  row.outFh === true ? (row.outFh = 'Y') : (row.outFh = '')
  row.outDx === true ? (row.outDx = 'Y') : (row.outDx = '')
  row.outRq === true ? (row.outRq = 'Y') : (row.outRq = '')
  await service.put('/pcOrder/shoe/updatePcOrderStyleColorDdDetail', row)
}

const checkboxChange = async (a: any, row: any) => {
  if (a === 'newFlag' || a === 'oldFlag' || a === 'gbFlag') {
    row.newFlag = false
    row.oldFlag = false
    row.gbFlag = false
    row[a] = true
  }
  row.newFlag === true ? (row.newFlag = 'Y') : (row.newFlag = '')
  row.oldFlag === true ? (row.oldFlag = 'Y') : (row.oldFlag = '')
  row.gbFlag === true ? (row.gbFlag = 'Y') : (row.gbFlag = '')
  row.embroidFlag === true ? (row.embroidFlag = 'Y') : (row.embroidFlag = '')
  row.printFlag === true ? (row.printFlag = 'Y') : (row.printFlag = '')
  row.sewFlag === true ? (row.sewFlag = 'Y') : (row.sewFlag = '')
  row.hfFlag === true ? (row.hfFlag = 'Y') : (row.hfFlag = '')
  row.outJy === true ? (row.outJy = 'Y') : (row.outJy = '')
  row.outFh === true ? (row.outFh = 'Y') : (row.outFh = '')
  row.outDx === true ? (row.outDx = 'Y') : (row.outDx = '')
  row.outRq === true ? (row.outRq = 'Y') : (row.outRq = '')
  await service.put('/pcOrder/shoe/updatePcOrderStyleColorDdDetail', row)
  ElMessage({
    type: 'success',
    message: '修改成功'
  })
  currentRow(currentTable.value)
}

const getSelectList = async () => {
  await selectList(formList, () => service.get('/back/order/allOrderCondition'))
}
// 当组件挂载完成时，调用getSelectList函数
onMounted(() => {
  getSelectList()
})
</script>

<style lang="less" scoped></style>
